<template>
  <div className="loginBox">
    <div className="logo">
      <img src="../assets/imgs/logo.png" alt="">
      <p>长春农安经济开发区</p>
      <h3>欢迎登录</h3>
    </div>
    <div className="login">
      <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef" label-position="top">
        <el-form-item label="账号" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password />
        </el-form-item>
        <div class="item">
          <label>记住密码</label>
          <input type="checkbox" v-model="form.remember">
        </div>
        <el-form-item>
          <el-button type="primary" round @click="submitForm(ruleFormRef)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue"
import axios from "axios";
import { useRouter } from "vue-router";
const router = useRouter()


const ruleFormRef = ref()
const form = reactive({
  userName: '',
  password: '',
  logo: "PAD",
  remember: ''
})
const rules = reactive({
  userName: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
})

const submitForm = async (formEl) => {
  console.log(11111111111111);
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const res = await axios.post('http://139.224.69.209:8089/app/login', form)
      console.log(res, 123123);
      sessionStorage.setItem("token", res.token)
      localStorage.setItem('userName',res.userInfo.userName)
      setUserInfo()
      router.push('/basicinfor')
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 存储cookie
const setUserInfo = () => {
  if (form.remember) {
    console.log(123);
    setCookie("userName", form.userName)
  } else {
    console.log(456);
    setCookie("userName", "")
    setCookie("password", "")
  }
}
// 获取cookie
const getCookie = (key) => {
  if (document.cookie.length > 0) {
    var start = document.cookie.indexOf(key + '=')
    if (start !== -1) {
      start = start + key.length + 1
      var end = document.cookie.indexOf(';', start)
      if (end === -1) end = document.cookie.length
      return unescape(document.cookie.substring(start, end))
    }
  }
  return ''
}
// 将存储的cookie格式化
const setCookie = (cName, value, expiredays) => {
  var exdate = new Date()
  exdate.setDate(exdate.getDate() + expiredays)
  document.cookie = cName + '=' + decodeURIComponent(value) +
    ((expiredays == null) ? '' : ';expires=' + exdate.toGMTString())
}
// 判断是否记住密码，将账号密码回填
let userName = getCookie("userName")
// 如果存在赋值给表单，并且将记住密码勾选
if (userName) {
  form.userName = userName
  form.password = 123456
  form.remember = true
}

</script>

<style scoped lang="less">
.loginBox {
  width: 100%;
  height: 100vh;
  .logo {
    width: 100%;
    height: 270px;
    background: linear-gradient(to top right, #0a4568, #46acff);
    z-index: -1;
    text-align: center;

    img {
      margin: 40px 0 12px 0;
      width: 60px;
      height: 60px;
    }

    p {
      color: #cdecf4;
      font-size: 18px;
    }

    h3 {
      margin-top: 40px;
      color: #fefef6;
      font-weight: bold;
      font-size: 24px;
    }
  }

  .login {
    width: 30%;
    padding: 20px;
    background: #fff;
    margin: 0 auto;
    .item{
      margin-bottom: 20px;
      label{
        padding: 0 5px;
      }
    }
    .el-button{
      width: 100%;
    }
  }

}
</style>